import LoadingComponent from "@/components/loading.vue";

const loadable = (asyncFunc) => {
  let component = () => ({
    // component: import("./MyComponent.vue"),
    // loading: LoadingComponent,
    // error: ErrorComponent,
    // delay: 200,
    // timeout: 3000,
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: asyncFunc(), // 最终切换的时候， 会采用这个组件
    // 异步组件加载时使用的组件
    loading: LoadingComponent, // 只是为了增加loading效果
    // 加载失败时使用的组件
    // error: ErrorComponent,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 3000,
  });
  return {
    // loadable 执行完毕后， 返回一个组件
    render(h) {
      return h(component);
    },
  };
};

// 路由切换  异步加载的loading
export default loadable;
